<template>
  <div class="meeting-detail">
    <van-nav-bar
      title="会议详情"
      left-arrow
      :safe-area-inset-top="true"
      @click-left="onClickLeft"
    />
    <div class="meeting-content">
      <div class="meeting-body">
        <van-cell
          style="margin-top: 1rem"
          title="会议名称"
          :value="meetingDetailData.name"
        />
        <van-cell-group style="margin-top: 1rem">
          <van-cell title="开始时间" :value="meetingDetailData.startTime" />
          <van-cell title="结束时间" :value="meetingDetailData.endTime" />
          <van-cell title="会议描述" :value="meetingDetailData.describe" />
        </van-cell-group>
        <van-cell-group style="margin-top: 1rem">
          <van-cell
            title="会议类型"
            :value="meetingType[meetingDetailData.type]"
          />
          <van-cell
            v-if="meetingDetailData.type === 1"
            title="会议室"
            :value="meetingDetailData.roomName"
          />
          <van-cell
            v-if="meetingDetailData.type === 1"
            title="房间号"
            :value="meetingDetailData.roomNumber"
          />
        </van-cell-group>
        <van-collapse v-model="activeNames" style="margin-top: 1rem">
          <van-collapse-item title="参会人员" name="1">
            <span v-for="(item, index) in meetingDetailData.member" :key="index"
              >{{ item.name }}、
            </span>
          </van-collapse-item>
        </van-collapse>
      </div>
      <div class="to-meeting" v-if="type === '0'" @click="goMeeting">
        进入会议
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted, isReactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getCmsMeetingById } from '@/api/home/meetingDetail.js'
import { meetingType } from '@/enum.js'
import { Notify } from 'vant'
// import { deepClone } from '@/utils/util.js'
export default {
  name: 'MeetingDetail',
  setup() {
    const route = useRoute()
    const router = useRouter()

    onMounted(() => {
      getMeetingDetail()
    })

    /**
     * 导航栏区域
     */
    const onClickLeft = () => history.back()

    /**
     * 内容区域
     */

    // 会议 id
    const id = route.query.id
    // 0 首页进入
    // 1 审批会议进入
    // 2 参会记录
    const type = route.query.type

    let meetingDetailData = reactive({})

    const activeNames = ref(['1'])

    // 根据会议 id 获取会议详情
    async function getMeetingDetail() {
      const res = await getCmsMeetingById({ id })
      if (res.data.code !== 200) return
      console.log(res)
      meetingDetailData = Object.assign(meetingDetailData, res.data.data)
      console.log(isReactive(meetingDetailData))
    }

    function goMeeting() {
      if (meetingDetailData.meetingStatus === 1) {
        Notify({ type: 'warning', duration: 1000, message: '会议暂未开始！' })
      } else {
        router.push({
          path: '/meeting',
          query: {
            id,
          },
        })
      }
    }

    return {
      meetingDetailData,
      activeNames,
      meetingType,
      type,
      onClickLeft,
      goMeeting,
    }
  },
}
</script>

<style lang="scss" scoped>
.meeting-detail {
  width: 100%;
  height: 100vh;
  background-color: var(--global-bg);

  .meeting-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: calc(100vh - var(--van-nav-bar-height));

    .meeting-body {
      width: 100%;
    }

    .to-meeting {
      width: 20rem;
      height: 5rem;
      margin-bottom: 6rem;
      border-radius: 0.5rem;
      background-color: var(--btn-background);
      color: var(--btn-text-color);
      text-align: center;
      line-height: 5rem;
      font-size: 1.5rem;
    }
  }
}
</style>